export const chartOption = {
  title: {
    text: '市场供需情况',
    x: 'center',
    y: 'top',
    textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
      fontSize: 16,
      color: '#fff'
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: "cross",
      backgroundColor: "rgba(255, 255, 255, 0.8)",
      position: function (pos, params, el, elRect, size) {
        var obj = { top: 10 };
        obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
        return obj;
      },
      extraCssText: "width: 170px",
    },
    formatter: function (params) {
      // console.log(params);
      let temp = `<div>${params
        .map((item, index) => {
          if (params[0].seriesType == "line") {
            return `
            <div style="display: flex;justify-content: flex-start;align-items: center;margin-top: 6px">
              <div style="width: 8px;height:8px;border-radius:50%;background-color:${item.color
              };"></div>
              <div style="margin-left: 10px">
                ${item.seriesName}：${item.data || "--"}
              </div>
            </div>
            `;
          } else {
            if (index != 0) {
              return `
            <div style="display: flex;justify-content: flex-start;align-items: center;margin-top: 6px">
              <div style="width: 8px;height:8px;border-radius:50%;background-color:${item.color
                };"></div>
              <div style="margin-left: 10px">
                ${item.seriesName}：${item.data || "--"}
              </div>
            </div>
            `;
            }
          }
        })
        .join("")}</div>`;
      if (params[0].seriesType == "line") {
        return `
        <div>
          <div>${params[0].name}</div>
          ${temp}
        </div>
        `;
      } else {
        return `
        <div>
          <div>${params[0].name}</div>
          ${temp}
          <div style="display: flex;justify-content: flex-start;align-items: center;margin-top: 6px">
            <div style="width: 8px;height:8px;border-radius:50%;background-color:${params[0].color
          };"></div>
            <div style="margin-left: 10px">
              ${params[0].seriesName}：${params[0].data || "--"}
            </div>
          </div>
        </div>
        `;
      }

    },
  },
  legend: {
    textStyle: {
      color: '#fff'
    },
    top: "8%",
    //left: '10%',
    selected: {}
  },

  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },

  dataZoom: [
    {
      type: "slider",
      show: true,
      xAxisIndex: [0, 1],
      start: 0,
      end: 100,
      height: 8,
      bottom: "3%",
    },
  ],
  grid: {
    top: '20%',
    right: '2%',
    left: '6%',
    bottom: '17%',

  },

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
    /* splitLine: { //网格线
      lineStyle: {
        color: ['#666'],
        type: 'dashed'//虚线
      },
      show: true,
    }, */
    axisLabel: {
      formatter: (value) =>  //X轴的内容
      {

        let ret = ""; //拼接加\n返回的类目项
        let max = 10;  //每行显示的文字字数
        let val = value.length;  //X轴内容的文字字数
        let rowN = Math.ceil(val / max);  //需要换的行数
        if (rowN > 1)  //判断 如果字数大于2就换行
        {
          for (let i = 0; i < rowN; i++) {
            let temp = "";  //每次截取的字符串
            let start = i * max;  //开始截取的位置
            let end = start + max;  //结束截取的位置
            temp = value.substring(start, end) + "\n";
            ret += temp;  //最终的字符串
          }
          return ret;
        }
        else { return value }
      }
    }
  },
  yAxis: {
    type: 'value',
    name: "出力（MW）",
    align: "left",
    nameTextStyle: {
      color: "#fff",

    },
    splitLine: { //网格线
      lineStyle: {
        color: ['#666'],
        type: 'solid'//虚线
      },
      show: true,
    },
  },
  series: [
    {
      name: '',
      data: [],
      type: 'line',
      symbol: 'none',
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        normal: {
          lineStyle: {
            width: 2,
            type: 'dotted'
          }
        }
      }
      /* itemStyle: {
        lineStyle: {
          color: '#746deb' //改变折线颜色
        }
      }, */
    },//
    {
      name: '',
      data: [],
      smooth: true,
      type: 'line',
      symbol: 'none',
      itemStyle: {
        color: '#9dffc7', //改变折线点的颜色
      },
      emphasis: {
        focus: 'series'
      },

    },
    {
      name: '',
      data: [],
      smooth: true,
      type: 'line',
      symbol: 'none',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#fca55f'
      },
    },
    {
      name: '',
      data: [],
      smooth: true,
      type: 'line',
      symbol: 'none',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#f7adcb'
      },
    },
    {
      name: '',
      data: [],
      smooth: true,
      type: 'line',
      symbol: 'none',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#78d3f8'
      },
    },
    {
      name: '',
      data: [],
      smooth: true,
      type: 'line',
      symbol: 'none',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#fecd3e'
      },
    },
    {
      name: '',
      data: [],
      smooth: true,
      type: 'line',
      symbol: 'none',
      itemStyle: {
        color: '#7a8aaa'
      },
      emphasis: {
        focus: 'series'
      },

    },
    {
      type: "line",
      data: [],
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        lineStyle: {
          color: "#666"
        },
        emphasis: {
          disabled: true
        },
        data: []
      },
    },
  ]
}